<template>
	<view class="finish-item">
		<!-- 顶部背景图区域 -->
		<u-image class="bg-image" width="100%" height="283rpx" src="@/static/image/home/data_statistics/bg.png">
		</u-image>
		<!-- <view class="item1">
			<title-tools :title="appealDetail.enterprise_name" fontSize="30rpx"></title-tools>
			<view class="content">
				{{appealDetail.appeal_content || appealDetail.content}}
			</view>
			<view class="img-wrap" v-if="appealDetail.material_files">
				<u-image v-for="(item,index) in imgList" @click="previewImag(item)" class="img" width="200rpx" height="200rpx" border-radius="10rpx"
					:src="item" :key="index"></u-image>
				
			</view>
		</view> -->
		<view class="card">
			<view class="flex align_center marbot16">
				<view class="flex_1" style="margin-right: 24rpx;">
					<view class="flex align_center marbot16">
						<view class="tip" style="margin-right: 12rpx;">{{appealDetail.appear_type}}</view>
						<view class="tip">{{appealDetail.is_solve == 1?'未处理':appealDetail.is_solve == 2?'已处理':'办理中'}}</view>
					</view>
					<view class=" bold " style="font-size: 32rpx;">{{appealDetail.title}}</view>
				</view>
				<!-- <view :class="aisuss?'aiBut_act':'aiBut_not'" @click="aisuss?handleAijianyi():''" >AI建议</view> -->
			</view>
			<view class="marbot16 heis">{{appealDetail.createtime}}</view>
			<view class="line marbot16"></view>
			<!-- 普通展示 -->
			<view class="heis martop16">{{appealDetail.content}}</view>
			<!-- 九宫布局图片 -->
			<view class="flex flex_wrap martop16">
				<view class="relative" style="width: calc((100% / 3) - 20rpx);margin: 10rpx;height: 0;padding-bottom: calc((100% / 3) - 20rpx);" v-for="(iten,ind) in appealDetail.material_files" :key='iten'>
					<image :src="iten.url" mode="aspectFill" style="width: 100%;height: 100%;display: block;position:  absolute;top:0;left: 0;border-radius: 8rpx;" @click.stop="handleImg(iten.url)" v-if="iten.type == 'img'"></image>
					<video @click.stop="handleVideo(iten.url)" :src="iten.url" :controls='false' :show-fullscreen-btn='false' :show-center-play-btn='false' :show-play-btn='false' v-if="iten.type == 'video'" style="width: 100%;height: 100%;position: absolute;"></video>
				</view>
			</view>
			<!-- 语音展示 -->
			<view class="yuyinBox shodow flex align_center martop16" style="width: 60%;" v-if="appealDetail.voice_file" @click.stop="handleYuyinPaly(appealDetail)">
				<view class="" style="margin-right: 10rpx;">
					<image src="/static/image/yuyin_no.png" mode="" style="width: 28rpx;height: 28rpx;display: block;" v-if="!appealDetail.flag"></image>
					<image src="/static/image/yuyin_act.gif" mode="" style="width: 28rpx;height: 28rpx;display: block;" v-if="appealDetail.flag"></image>
				</view>
				<view class="">{{appealDetail.voice_time}}</view>
			</view>
		</view>
		
		
		
		
		<view class="box">
			<u-tabs :list="tabList" ref="tabs" :is-scroll="false" :current="current" @change="change"></u-tabs>
			<view class="line"></view>
			<view v-if="current == 0">
				<view v-if="currentIndex == 0">
					<!-- 反馈完成提示区域 -->
					<view class="hint">
						<u-image width="110rpx" height="110rpx" src="@/static/image/home/finish.png"></u-image>
						<view class="hint-text">
							<view class="">
								此诉求已提交反馈，
							</view>
							<view class="">
								点击<text>“跟进记录”</text>查看详情。
							</view>
						</view>
					</view>
					<!-- 反馈信息区域 -->
					<view class="feedback-text">
						<view class="head">
							{{appealDetail.now_organization_classify || '中台管理员'}} {{appealDetail.now_organization_name}} 提交诉求反馈：
						</view>
						<view class="content">
							{{appealDetail.appeal_reply}}
						</view>
						<view class="info">
							<text class="time">{{appealDetail.solvetime | formatDate}}</text>
							<text class="copy-btn" @click="copy">复制</text>
						</view>
					</view>
					<!-- 分割线 -->
					<view class="line"></view>
					<!-- 单选框 -->
					<view class="radio-wrap" @click="radioCheck" v-if="level == 1">
						<u-image width="36rpx" height="36rpx"
							:src="radio ? '/static/image/home/radio_hg_img.png' : '/static/image/home/radio_img.png'">
						</u-image>
						<text class="radio-text">公示</text>
					</view>
					<!-- 文本域输入框 -->
					<view class="input" v-show="radio">
						<u-input class="textarea-input" cursor-spacing="100"  :custom-style="inputCustomStyle" placeholder="请输入要公示的诉求反馈内容"
							v-model="publicity" maxlength="500" height="400" type="textarea" :clearable="false" @input="inputChange">
						</u-input>
					</view>
					<!-- 提交按钮 -->
					<view class="btn" v-show="radio">
						<u-button :custom-style="customStyle" @click="submit">提交</u-button>
					</view>
				</view>
				<!-- 已公示页面展示内容 -->
				<view v-if="currentIndex == 1">
					<view class="finish">
						<view class="img-wrap">
							<u-image width="103rpx" height="100rpx" src="/static/image/home/icon_fabu.png"></u-image>
						</view>
						<view class="hint">
							<view>此诉求已发布公示，</view>
							<view>点击“跟进记录”查看详情。</view>
						</view>
					</view>
				</view>
				<!-- 处理中展示内容 -->
				<view v-if=" currentIndex == 2">
					<view class="finish">
						<view class="img-wrap">
							<u-image width="103rpx" height="100rpx" src="/static/image/home/icon_fabu.png"></u-image>
						</view>
						<view class="hint">
							<view>此诉求正在处理中，</view>
							<view>点击“跟进记录”查看详情。</view>
						</view>
					</view>
				</view>
				<!-- 超时预警展示内容 -->
				<view v-if=" currentIndex == 3">
					<view class="overtime">
						<view class="img-wrap">
							<u-image width="103rpx" height="100rpx" src="/static/image/home/transfer.png"></u-image>
						</view>
						<view class="hint">
							<view>您已将此诉求转移交办，</view>
							<view>点击“跟进记录”查看详情。</view>
						</view>
					</view>
					<view class="overtime-detail">
						{{appealDetail.timeout}}
					</view>
					<view class="btn">
						<u-button :custom-style="customStyle" @click="overtimeSubmit">催办</u-button>
					</view>
				</view>
			</view>
			<view v-if="current == 1">
				<schedule :data="appealDetail.record"></schedule>
			</view>
		</view>
		<!-- 模态框 :async-close="true"-->
		<u-modal v-model="showModel" @confirm="confirm" :show-cancel-button="true" :content="content"></u-modal>
		
		<videoMax :isShowVideo='isShowVideo' :videoUrl='videoUrl' @colse='handlecolse'></videoMax>
	</view>
</template>

<script>
	import Schedule from '@/pages/index/schedule/Schedule.vue'
	import CONFIG from '@/config/config.js'
	import { dateFormats } from '@/utils/utils.js'
	import TitleTools from '../../../components/title-tools/TitleTools.vue'
	import { apiSetApea } from '@/api/publicity/publicity.js'
	import videoMax from "@/components/video_max/video_max.vue";
	import {
		setImgPath
	} from '@/utils/utils.js'
	import {
		apiGetAppealById
	} from '@/api/publicity/publicity.js'
	import { apiSetUrge } from '@/api/overtime/overtime.js'
	export default {
		name: 'FinishItem',
		components: {
			TitleTools,
			Schedule,
			videoMax
		},
		data() {
			return {
				//tabs标签栏数据
				tabList: [{
						name: '诉求反馈'
					},
					{
						name: '跟进记录'
					}
				],
				//tabs选中项下标
				current: 0,
				//备注信息
				remark: '',
				radio: false,
				//文本域内容
				publicity: '',
				// 按钮样式
				customStyle: {
					marginTop: '30rpx',
					color: '#fff',
					fontSize: '34rpx',
					backgroundColor: '#196EFF'
				},
				//模态框
				showModel: false,
				//模态框提示内容
				content: '确认提交公示？',
				//判断显示内容
				currentIndex: 0,
				//文本域样式
				inputCustomStyle: {
					padding: '25rpx',
					// textIndent: '30rpx',
					overflowY: 'auto',
					borderRadius: '10rpx',
					backgroundColor: '#EAF1F9'
				},
				appealDetail: {},
				//诉求图片
				imgList: [],
				//事项id
				id: '',
				pageTitle: '',
				timeout: '',
				level: getApp().globalData.level,
				
				
				baseUrl:'',
				innerAudioContext:null,
				clearTime:null,   //定时器
				isShowVideo:false,
				videoUrl:'',
			}
		},
		onLoad(e){
			this.innerAudioContext = uni.createInnerAudioContext();
			this.baseUrl = CONFIG.baseUrl
		},
		async onShow() {

			this.currentIndex = this.$Route.query.current;
			this.id = this.$Route.query.id;
			const currentTab = this.$Route.query.currentTab;
			if (currentTab == 1) {
				this.$refs.tabs.clickTab(currentTab);
			}
			//如果是已解决或者已公示直接展示跟进记录
			if (this.currentIndex == 1 || this.currentIndex == 0) {
				this.$refs.tabs.clickTab(1);
			}
			this.timeout = this.$Route.query.timeout;
			switch (this.currentIndex) {
				case 1:
					this.pageTitle = '公示'
					break;
				case 2:
					this.pageTitle = '处理中'
					break;
				default:
					break;
			}
			uni.setNavigationBarTitle({
				title: this.pageTitle
			});
			//获取事项详情
			await this.apiGetAppealById(this.id);
			this.imgList = this.appealDetail.images || this.appealDetail.material_files;
			// console.log(this.appealDetail)

		},
		methods: {
			handleYuyinPaly(item){  // 语音播报
				let _this = this
				if(this.clearTime){
					clearTimeout(_this.clearTime)
				}
				
				if(_this.innerAudioContext){
					_this.innerAudioContext.autoplay = true;
					_this.innerAudioContext.src = _this.baseUrl + item.voice_file;
					_this.clearTime = setTimeout(()=>{
						_this.innerAudioContext.pause();
						_this.innerAudioContext.destroy()
						_this.innerAudioContext = null
						_this.appealDetail.flag = false
					},(item.voice_time - 0) * 1000)
				}else{
					_this.innerAudioContext = uni.createInnerAudioContext();
					_this.innerAudioContext.autoplay = true;
					_this.innerAudioContext.src = _this.baseUrl + item.voice_file;
					
					_this.clearTime = setTimeout(()=>{
						_this.innerAudioContext.pause();
						_this.innerAudioContext.destroy()
						_this.innerAudioContext = null
						_this.appealDetail.flag = false
					},(item.voice_time - 0) * 1000)
				}
				
				this.appealDetail.flag = !item.flag
			},
			handleImg(url){  // 查看图片
				uni.previewImage({
					urls:[url],
				})
			},
			handlecolse(){
				this.isShowVideo = false
			},
			handleVideo(url){  // 查看图片
				this.isShowVideo = true
				this.videoUrl = url
			},
			inputChange() {

			},
			//tabs切换事件
			change(index) {
				this.current = index;
			},
			//单选框点击
			radioCheck() {
				this.radio = !this.radio;
			},
			//提交公示
			async submit() {
				await this.apiSetApea();
				this.showModel = true;
			},
			confirm(e) {
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				})
				this.$Router.push({
					name: 'publicity',
					params: {
						current: 1
					}
				})
			},
			//提交催办
			async overtimeSubmit() {
				const that = this;
				await this.apiSetUrge();
				uni.showToast({
					title: '催办成功',
					icon: 'success',
					success() {
						setTimeout(() => {
							that.$Router.back(1);
						}, 500)
					}
				})
			},
			//复制文本框中内容
			copy() {
				uni.setClipboardData({
					data: this.appealDetail.appeal_reply
				})
			},
			//根据id获取事项详情
			async apiGetAppealById(id) {
				const res = await apiGetAppealById(id);
				let imageRegex = /\.(jpg|jpeg|png|gif)$/i;
				let videoRegex = /(mp4|avi|mov)/i;
				let arr = []
				let url = ''
				let type = ''
				if(res.data.material_files.length != 0){
					let zongArr = res.data.material_files.split(',')
					zongArr.map((vv,ii)=>{
						url = this.baseUrl +  vv
						if(imageRegex.test(vv)){
							type = 'img'
						}
						if(videoRegex.test(vv)){
							type = 'video'
						}
						arr.push({url,type})
					})
				}
				
				res.data.material_files = arr
				res.data.createtime = dateFormats(res.data.createtime * 1000,'Y-m-d H:i')
				res.data.flag = false
				res.data.record.pop()
				this.appealDetail = res.data;
				console.log(res);
			},
			//提交公示
			async apiSetApea () {
				const res = await apiSetApea(this.appealDetail.id, this.publicity);
				// this.$Router.push({
				// 	name: 
				// })
				
			},
			//提交催办
			async apiSetUrge () {
				const res = await apiSetUrge(this.appealDetail.id);
			},
			//图片预览
			previewImag (src) {
				wx.previewImage({
				  current: src, // 当前显示图片的http链接
				  urls: this.imgList // 需要预览的图片http链接列表
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.finish-item {
		padding: 10rpx 20rpx;
	}

	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
	}

	//代办事项内容样式
	.item1 {
		padding: 30rpx;
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.content {
			margin-top: 30rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #000000;
		}

		.img-wrap {
			display: flex;
			margin-top: 30rpx;
			.img:not(:first-child) {
				margin-left: 20rpx;
			}
		}
	}
	.card{
		padding: 24rpx;
		background: #fff;
		margin-bottom: 24rpx;
		border-radius: 20rpx;
		.tip{
			padding: 2rpx 4rpx;
			border-radius: 8rpx;
			border: 1rpx solid #FF7D04;
			color: #FF7D04;
			font-size: 24rpx;
		}
		.yuyinBox{
			padding: 16rpx 24rpx;
			border-radius: 34rpx;
			background: #2979ff;
			color:#fff;
		}
		.aiBut_act{
			padding: 12rpx 40rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #fff;
			border-radius: 36rpx;
			background: #196EFF;
		}
		.aiBut_not{
			padding: 12rpx 40rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #fff;
			border-radius: 36rpx;
			background: #ccc;
		}
		.line{
			width: 100%;
			height: 1rpx;
			background: rgba(0, 0, 0, .15);
		}
		.steps{
			padding: 12rpx 24rpx;
			position: relative;
			&::after{
				content: '';
				width: 1rpx;
				height: 100%;
				background: rgba(0,0,0,.4);
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
			}
			&::before{
				content: '';
				width: 20rpx;
				height: 20rpx;
				border: 1rpx solid rgba(0,0,0,.4);
				border-radius: 12rpx;
				background:  #fff;
				position: absolute;
				left: -11rpx;
				top: 0;
				z-index: 4;
			}
		}
		.steps_act{
			padding: 12rpx 24rpx;
			position: relative;
			&::after{
				content: '';
				width: 1rpx;
				height: 100%;
				background: #2979ff;;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
			}
			&::before{
				content: '';
				width: 20rpx;
				height: 20rpx;
				border-radius: 12rpx;
				border: 1rpx solid #2979ff;;
				background:  #2979ff;
				position: absolute;
				left: -11rpx;
				top: 0;
				z-index: 4;
			}
		}
	}

	// 表单区域内容样式
	.box {
		margin-top: 30rpx;
		padding: 0 20rpx 20rpx 20rpx;
		width: 710rpx;
		// height: 1080rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.line {
			width: 710rpx;
			height: 1px;
			background: #E5E5E5;
			overflow: hidden;
		}

		//反馈完成提示区域样式
		.hint {
			display: flex;
			align-items: center;
			padding: 80rpx 60rpx 80rpx 80rpx;

			.hint-text {
				margin-left: 31rpx;
				font-size: 30rpx;
				color: #000000;
			}
		}

		// 反馈信息区域样式
		.feedback-text {
			padding: 30rpx;
			margin: 0 auto;
			width: 630rpx;
			background: #EAF1F9;
			border-radius: 10rpx;

			.head {
				font-size: 30rpx;
				font-weight: 500;
				color: #000000;
			}

			.content {
				margin-top: 29rpx;
				font-size: 28rpx;
				color: #000000;
			}

			.info {
				margin-top: 28rpx;

				.time {
					font-size: 24rpx;
					color: #000000;
				}

				.copy-btn {
					margin-left: 30rpx;
					font-size: 24rpx;
					color: #196EFF;
				}
			}
		}

		.line {
			margin: 0 -20rpx;
			margin-top: 41rpx;
			width: 710rpx;
			height: 1px;
			background: #E5E5E5;
		}

		// 单选框样式
		.radio-wrap {
			display: flex;
			align-items: center;
			margin-top: 30rpx;

			text {
				margin-left: 21rpx;
				font-size: 30rpx;
				color: #000000;
			}
		}
	}

	.finish,
	.overtime {
		display: flex;
		align-items: center;
		padding: 0 20rpx 0 70rpx;

		.img-wrap {
			flex-shrink: 0;
		}

		.hint {
			display: block;
			margin-left: -41rpx;
			font-size: 30rpx;
			color: #000000;
		}
	}

	.overtime-detail {
		margin-top: 230rpx;
		text-align: center;
		font-size: 28rpx;
		color: #FF0000;
	}

	.input {
		margin-top: 20rpx;
	}
.marbot24{
		margin-bottom: 24rpx;
	}
	.marbot16{
		margin-bottom: 16rpx;
	}
	.marbot12{
		margin-bottom: 12rpx;
	}
	.martop24{
		margin-top: 24rpx;
	}
	.martop16{
		margin-top: 16rpx;
	}
	// ::v-deep .textarea-input {
	// 	margin-top: 30rpx;
	// 	// text-indent: 30rpx;
	// 	overflow-y: auto;
	// 	background-color: #EAF1F9 !important;
	// 	border-radius: 10rpx;
	// }
</style>
